<template>
    <view class="submitorder">
        <view class="header"></view>
        <view class="title">
            <view class="header-title">
                <image src="https://z3.ax1x.com/2021/04/10/caRmMF.png" mode=""></image>
                <view class="header-title-time">
                    <text>剩余支付时间</text>
                    <uni-countdown class="uni-countdown" :show-day="false" backgroundColor="#ff6208" color="#ffffff" :hour="00" :minute="29" :second="59"></uni-countdown>
                </view>
                <view class="header-title-price">￥{{ price }}</view>
            </view>
            <view class="film-title">充电详情</view>
            <view class="film-msg">
                <view class="film-msg-electric">
                    <text>充电电量</text>
                    <text>{{ chargingdegree }}度</text>
                </view>
                <view class="film-msg-cost">
                    <text>充电费用</text>
                    <text>{{ price }}元</text>
                </view>
                <view class="film-msg-discount">
                    <text>优惠券</text>
                    <view class="film-msg-discount-box">
                        <text>暂无优惠券</text>
                        <image src="https://z3.ax1x.com/2021/04/08/cYkTVs.png" mode=""></image>
                    </view>
                </view>
            </view>
            <view class="payment-title">请选择付款方式</view>
            <view class="payment">
                <view class="WeChat-payment">
                    <radio-group v-for="(item, index) in radioItems" :key="index" @change="radioChange">
                        <view>
                            <image :src="item.image" mode=""></image>
                            <text>{{ item.value }}</text>
                        </view>
                        <label class="radio"><radio color="#ff5300" :checked="index == current" :value="item.value" /></label>
                    </radio-group>
                </view>
            </view>
        </view>
        <button type="primary" @tap="tapBtn('custom')" class="submitbtn">确认支付</button>
        <chunLei-modal v-model="value" :mData="data" maskEnable="false" :type="type" @onConfirm="onConfirm" :navHeight="0">
            <div class="custom-view" @tap.stop>
                <div class="payshow">
                    <image class="image" src="https://z3.ax1x.com/2021/04/10/caLClj.png" mode=""></image>
                    <view class="foot">
                        <view>充电费用成功</view>
                        <navigator url="../../home/home" open-type="reLaunch"><button type="primary" class="btn">返回首页</button></navigator>
                        <view class="foot-img">
                            <text>查看车辆详情</text>
                            <image class="image1" src="https://z3.ax1x.com/2021/04/08/cYkTVs.png" mode=""></image>
                        </view>
                    </view>
                </div>
            </div>
        </chunLei-modal>
    </view>
</template>

<script>
import chunLeiModal from '../../../components/chunLei-modal/chunLei-modal.vue';
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapMutations, mapActions } = createNamespacedHelpers('map');
let flapper;
let arr = uni.getStorageSync('arr');
export default {
    data() {
        return {
            // flag1: false,
            type: 'default',
            value: false,
            data: {},
            chargingdegree: '',
            price: '',
            radioItems: [
                {
                    id: 1,
                    value: '微信支付',
                    image: 'https://z3.ax1x.com/2021/04/10/caclIP.png',
                    checked: false
                },
                {
                    id: 2,
                    value: '支付宝',
                    image: 'https://z3.ax1x.com/2021/04/10/cacGRS.png',
                    checked: false
                },
                {
                    id: 3,
                    value: '钱包',
                    image: 'https://z3.ax1x.com/2021/04/10/cacUqs.png',
                    checked: false
                },
                {
                    id: 4,
                    value: 'Apple Pay',
                    image: 'https://z3.ax1x.com/2021/04/10/cac0I0.png',
                    checked: false
                }
            ],
            current: 0
        };
    },
    components: {
        chunLeiModal
    },
    computed: {
        ...mapState(['powerOneData', 'bridge', 'flag'])
    },
    mounted() {
        this.suiji();
        this.chargingdegree = arr[0].chargingdegree;
        this.price = arr[3].price;
    },
    methods: {
        ...mapActions(['addorder']),
        radioChange: function(evt) {
            for (let i = 0; i < this.radioItems.length; i++) {
                if (this.radioItems[i].value === evt.target.value) {
                    this.current = i;
                    break;
                }
            }
        },
        suiji() {
            var num = parseInt(Math.random() * 100000); //首先创建一个五位数的随机数（Number）
            //把每一位都单独提出来
            var one = parseInt(num / 10000);
            var two = parseInt((num / 1000) % 10);
            var thr = parseInt((num / 100) % 10);
            var four = parseInt((num / 10) % 10);
            var fif = num % 10;
            //倒着输出一下
            var arr = [fif, four, thr, two, one];
            let array = [
                '京',
                '津',
                '冀',
                '蒙',
                '辽',
                '吉',
                '黑',
                '沪',
                '苏',
                '浙',
                '皖',
                '闽',
                '赣',
                '鲁',
                '豫',
                '鄂',
                '湘',
                '粤',
                '桂',
                '琼',
                '渝',
                '川',
                '贵',
                '云',
                '陕',
                '甘',
                '青',
                '宁',
                '新'
            ];
            let number = ['A', 'B', 'C', 'D', 'E', 'F', 'H', 'N', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
            let str = arr.join('');
            let str1 = number[Math.round(Math.random() * number.length)];
            let str2 = array[Math.round(Math.random() * array.length)];
            flapper = str2 + str1 + '·' + str;
        },
        tapBtn(type) {
            this.addorder({
                carCode: flapper,
                chargeStartTime: arr[1].chargeStartTime,
                couponInfoId: 0,
                electricity: JSON.parse(arr[0].chargingdegree),
                powerplantId: this.powerOneData.powerplantId,
                stationId: this.bridge[0].stationId
            });
            this.type = type;
            this.value = !this.value;
            switch (this.type) {
                case 'default':
                    this.data = this.defaultData;
                    break;
                case 'select':
                    this.data = this.selectData;
                    break;
                case 'advert':
                    this.data = this.advertData;
                    break;
                case 'share':
                    this.data = this.shareData;
                    break;
                case 'input':
                    this.data = this.inputData;
                    break;
                case 'multiSelect':
                    this.data = this.multiSelectData;
                    break;
                case 'notify':
                    this.data = this.notifyData;
                    break;
            }
        }
    }
};
</script>

<style lang="scss">
.submitorder {
    background-color: #f9f9f9;
    height: 100vh;
    .header {
        padding: 0 30rpx;
        height: 120rpx;
        background-color: #ff6208;
        box-sizing: border-box;
    }
    .title {
        padding: 0 30rpx;
        .header-title {
            margin: auto;
            height: 220rpx;
            background-color: #ffffff;
            border-radius: 24rpx;
            margin-top: -60rpx;
            padding: 35rpx;
            box-sizing: border-box;
            position: relative;
            image {
                width: 50rpx;
                height: 45rpx;
                position: absolute;
                left: 30rpx;
                top: 0;
            }
            .header-title-time {
                text-align: center;
                text:nth-child(1) {
                    font-size: 28rpx;
                    color: #999999;
                }
                .uni-countdown {
                    display: flex;
                    justify-content: center;
                }
                // text:nth-child(2) {
                //     margin-left: 20rpx;
                //     font-size: 24rpx;
                //     color: #ff6208;
                // }
            }
            .header-title-price {
                text-align: center;
                margin-top: 15rpx;
                font-size: 38rpx;
                color: #ff6208;
                font-weight: 600;
            }
        }
        .film-title {
            font-size: 24rpx;
            color: #999999;
            margin-top: 24rpx;
        }
        .film-msg {
            padding: 24rpx 24rpx 24rpx 24rpx;
            background-color: #ffffff;
            border-radius: 24rpx;
            // height: 208rpx;
            margin-top: 24rpx;
            .film-msg-electric {
                display: flex;
                justify-content: space-between;
                text:nth-child(1) {
                    font-size: 28rpx;
                    color: #333333;
                }
                text:nth-child(2) {
                    font-size: 28rpx;
                    color: #666666;
                }
            }
            .film-msg-cost {
                display: flex;
                justify-content: space-between;
                margin-top: 40rpx;
                margin-bottom: 40rpx;
                text:nth-child(1) {
                    font-size: 28rpx;
                    color: #333333;
                }
                text:nth-child(2) {
                    font-size: 28rpx;
                    color: #666666;
                }
            }
            .film-msg-discount {
                display: flex;
                justify-content: space-between;
                align-items: center;
                text:nth-child(1) {
                    font-size: 28rpx;
                    color: #333333;
                }
                .film-msg-discount-box {
                    display: flex;
                    align-items: center;
                    text {
                        font-size: 24rpx;
                        color: #999999;
                        margin-right: 5rpx;
                    }
                    image {
                        width: 15rpx;
                        height: 22rpx;
                    }
                }
            }
        }
        .payment-title {
            font-size: 24rpx;
            color: #999999;
            margin-top: 24rpx;
        }
        .payment {
            // height: 320rpx;
            border-radius: 24rpx;
            margin-top: 24rpx;
            padding: 24rpx 24rpx 24rpx 24rpx;
            background-color: #ffffff;
            .WeChat-payment {
                radio-group {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                view {
                    text {
                        font-size: 28rpx;
                        color: #333333;
                    }
                    image {
                        width: 35rpx;
                        height: 35rpx;
                        margin-right: 20rpx;
                    }
                }
            }

            .radio {
                transform: scale(0.7);
            }
        }
    }
    .submitbtn {
        background-image: linear-gradient(to right, #ff7914 0%, #ff5501 100%);
        width: 510rpx;
        height: 96rpx;
        line-height: 96rpx;
        border-radius: 46rpx;
        margin-top: 60rpx;
    }
    // .content {
    //     padding: 50rpx 100rpx;
    // }
    .custom-view {
        // overflow: hidden;
        z-index: 999;
        display: flex;
        flex-direction: column;
        align-items: center;

        .payshow {
            width: 570rpx;
            height: 662rpx;
            border-radius: 6rpx;
            position: relative;
            .image {
                width: 100%;
                height: 372rpx;
                position: absolute;
                // top: -30rpx;
            }
            .foot {
                width: 100%;
                height: 290rpx;
                background: white;
                position: absolute;
                top: 355rpx;
                text-align: center;
                border-bottom-right-radius: 24rpx;
                border-bottom-left-radius: 24rpx;
                view:nth-child(1) {
                    margin-top: 40rpx;
                    font-size: 28rpx;
                    color: #ff5300;
                }
                .btn {
                    font-size: 28rpx;
                    color: #ffffff;
                    width: 350rpx;
                    border-radius: 40rpx;
                    margin-top: 45rpx;
                    background-image: linear-gradient(to right, #ff7914 0%, #ff5501 100%);
                }
                .foot-img {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 40rpx;
                    text {
                        font-size: 24rpx;
                        color: #666666;
                    }
                    .image1 {
                        width: 10rpx;
                        height: 20rpx;
                        margin-left: 8rpx;
                    }
                }
            }
        }
    }
}
</style>
